<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人记账小助手</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- 头部 -->
        <header class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">
                <i class="fas fa-calculator text-blue-600 mr-2"></i>
                个人记账小助手
            </h1>
            <div class="flex flex-wrap gap-4 text-sm text-gray-600">
                <span>本月收入: <span id="monthIncome" class="text-green-600 font-semibold">¥0</span></span>
                <span>本月支出: <span id="monthExpense" class="text-red-600 font-semibold">¥0</span></span>
                <span>结余: <span id="monthBalance" class="text-blue-600 font-semibold">¥0</span></span>
            </div>
        </header>

        <!-- 操作栏 -->
        <div class="bg-white rounded-lg shadow-md p-4 mb-6">
            <div class="flex flex-wrap gap-4 items-center">
                <button onclick="openModal()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                    <i class="fas fa-plus mr-2"></i>新增记录
                </button>
                <select id="categoryFilter" class="border rounded px-3 py-2">
                    <option value="">全部类别</option>
                    <option value="餐饮">餐饮</option>
                    <option value="交通">交通</option>
                    <option value="购物">购物</option>
                    <option value="娱乐">娱乐</option>
                    <option value="医疗">医疗</option>
                    <option value="其他">其他</option>
                </select>
                <input type="date" id="dateFilter" class="border rounded px-3 py-2">
                <button onclick="filterRecords()" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700">
                    <i class="fas fa-filter mr-2"></i>筛选
                </button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- 记录列表 -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">
                    <i class="fas fa-list mr-2"></i>最近记录
                </h2>
                <div id="recordsList" class="space-y-3 max-h-96 overflow-y-auto">
                    <!-- 记录将动态加载 -->
                </div>
            </div>

            <!-- 统计图表 -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">
                    <i class="fas fa-chart-pie mr-2"></i>本月支出统计
                </h2>
                <canvas id="expenseChart" width="400" height="300"></canvas>
            </div>
        </div>
    </div>

    <!-- 新增记录弹窗 -->
    <div id="recordModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
            <h3 class="text-xl font-semibold mb-4">新增记录</h3>
            <form id="recordForm">
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">类型</label>
                    <div class="flex gap-4">
                        <label class="flex items-center">
                            <input type="radio" name="type" value="income" class="mr-2" checked>
                            <span>收入</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="type" value="expense" class="mr-2">
                            <span>支出</span>
                        </label>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">金额</label>
                    <input type="number" id="amount" step="0.01" required class="w-full border rounded px-3 py-2">
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">类别</label>
                    <select id="category" required class="w-full border rounded px-3 py-2">
                        <option value="">请选择类别</option>
                        <option value="餐饮">餐饮</option>
                        <option value="交通">交通</option>
                        <option value="购物">购物</option>
                        <option value="娱乐">娱乐</option>
                        <option value="医疗">医疗</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">备注</label>
                    <input type="text" id="note" class="w-full border rounded px-3 py-2">
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">日期</label>
                    <input type="date" id="date" required class="w-full border rounded px-3 py-2">
                </div>
                
                <div class="flex gap-4">
                    <button type="submit" class="flex-1 bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
                        保存
                    </button>
                    <button type="button" onclick="closeModal()" class="flex-1 bg-gray-300 text-gray-700 py-2 rounded hover:bg-gray-400">
                        取消
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
